<#assign menuId=3>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>创建打样订单-${Application.systemName!}</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Ionicons -->
        <link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
       <!--datepickes-->
        <link href="../css/myself.css" rel="stylesheet" type="text/css" />
        <link href="../css/bootstrap-tagsinput.css" rel="stylesheet" type="text/css" >
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
			    vertical-align: middle;
			}
            .pull-left{
				border-left: 6px solid #3882FF;
				padding: 0 0 0 10px;
			}
			
            .bold{
           		font-size: 14px;
           		font-weight: bold;
            }
	       
	        a{
	        	cursor: pointer;
	        }
	        .row{
		       	padding: 0 0 0 5px;
		    }
		    /*新增样式*/
    		.ol_left{
	            width: 100%;
	            height: 30px;
	            line-height: 30px;
	            padding: 0;
	        }
	        .ol_left>li{
	            float: left;
	            margin-right: 5px;
	        }
	        .ol_left li, .ol_left{
	        	margin-bottom: 0;
	        }
           	.inpt td input{
           		width: 100%; 
           		height: 100%; 
           		border: 0;
           		padding: 0 8px;
           	}
           
           	.tag{
           		border: 1px solid #3882FF;
           		color: #3882FF;
           		padding: 5px 3px;
           	}
           	.adding{
           		border: 1px solid #3882FF;
           		color: #3882FF; 
           		width: 10%; 
           		text-align: center; 
           		padding: 5px 0;
           		margin-bottom: 10px;
           		cursor: pointer;
           		display:inline-block;
           	}
        </style>
    </head>
    <body class="skin-blue">
        <!-- header logo: style can be found in header.less -->
        <#include "../header.html"/>
        <div class="wrapper row-offcanvas row-offcanvas-left">
        	<!-- Left side column. contains the logo and sidebar -->
           <#include "../menu.html"/>
           
           <aside class="right-side">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>创建打样订单</h1>
                    <ol class="ol_left">
		                <li>当前位置：</li>
		                <li><a href="../proofingorder/list?pageNo=1">打样订单</a></li>
		                <li>> 创建打样订单</li>
		            </ol>
		            <hr class="no-margin" />
            	</section>
                <!-- Main content -->
                <section class="content">

                    <div class='row'>
                        <div class='col-md-12'>
                            <div class='box' style="padding: 20px;">
                            	<div class="clearfix center">
                            		<table class="table table-bordered custormView" style="width:30%;" >
                                       <tr>
                                           <td style="text-align: right; width: 12%; vertical-align: middle;">选择客户</td> 
                                           <td width="35%">
                                           	<select id="customer" class="selectpicker show-tick form-control"  data-live-search="true">
                                           		<#if customerId??>
                                           		<option selected="selected" value="${customerId!}">${customerName}</option> 
                                           		<#else>
                                           		<option value="">请选择</option> 
						                        <#list customerList as customer>
						                        <option value="${customer.id!}">${customer.fullname!}</option> 
						                        </#list>
                                           		</#if>  
						                    </select> 
                                           </td>
                                       </tr>
                                    </table>
                                    
                                    <div class="clearfix">
		                                <span class="pull-left bold">样衣图</span>
		                                <div class="col-md-12 photo">
		                                    <div class="col-md-4 col-md-offset-4  text-center">
		                                        <span class="btn btn-primary shangchuan" id="file_upload"><input type="button" name="">点击上传款式图</span>
		                                        <span>
		                                            <p>建议尺寸：480*270px</p>
		                                            <p>仅支持jpg、png、bmp格式</p>
		                                        </span>
		                                    </div>
		                                    <div class="zhanshi" >
		                                        <!-- <img id="preview" /> -->
		                                        <div class="zhanshi_find1">
		                                            <div class="col-md-8 ">
		                                                <img id="zhanshi_photo" src="">
		                                            </div>
		                                            <div class="col-md-4">
		                                                <!-- <span class="span_active">
		                                                    <i class="fa fa-fw fa-times"></i>
		                                                    <img src="../images/Design_draft_03.jpg">
		                                                    <p style="display: block; margin: 0;">默认主图</p>
		                                                </span> -->
		                                               
		                                                <a class="tianjia">
		                                                    <img src="../img/tianjia.png">
		                                                    <input type="file" accept="image/*" id="file_upload2">
		                                                </a>
		                                                <div class="clear"></div>
		                                                <p>建议尺寸：480*270px</p>
		                                               <p>仅支持jpg、png、bmp格式</p>
		                                            </div>
		                                        </div>
		                                    </div>
		                                </div>
		                                
		                            </div>
		                            <div class=" custorm-view clearfix ">
                                 <span class="bold pull-left">样衣信息</span>
                            </div>
								<div>
	                                <div class="style-chart clearfix">
	                                    <div class=" find-row">
	                                        <div class=" find-col" >
	                                            <span class="find_sp">季节款式</span>
	                                            <div class="find_div find_div2" style="border:none;">
		                                            <form>
		                                                <label for="anser"><input class="no" name="season" type="checkbox" value="春款" />春款</label>
		                                                
		                                                <label for="anser"><input class="no" type="checkbox" name="season" value="夏款" />夏款</label>
		                                                
		                                                <label for="anser"><input class="no" type="checkbox" name="season" value="秋款" />秋款</label>
		                                                
		                                                <label for="anser"><input class="no" type="checkbox" name="season" value="冬款" />冬款</label>
		                                            </form>
	                                            </div>
	                                            <span class="find_sp">款式性别</span>
	                                            <div class="find_div find_div2" style="border:none;">
	                                                <form>
	                                                    <label for="anser"> <input class="no"  type="radio" name="sex" value="男" />男</label>
	                                                    
	                                                    <label for="anser"><input class="no" type="radio" name="sex" value="女" />女</label>
	                                                    
	                                                    <label for="anser"><input class="no" type="radio" name="sex" value="中性" />中性</label>
	                                                </form>
	                                            </div>
	                                        </div>
	                                        <div class="clear"></div>
	                                         <div class=" find-col" >
	                                            <span class="find_sp">样衣分类</span>
	                                            <select class="find_div find_div2" id="category">
	                                                <option value="">请选择</option>
	                                            </select>
	
	                                            <span class="find_sp">来&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;源</span>
	                                            <input class="find_div find_div2" type="text" id="source" value="${customerName!}" placeholder="北京小黑裙有限公司"></input>
	                                        </div>
	                                        <div class="clear"></div>
	                                        <div class=" find-col" >
	                                                <span class="find_sp">风&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
	                                                <div class="find_div bs-example" style="height:auto;">
	                                                    <input type="text" value="" id="style" data-role="tagsinput" />
	                                                    <div class="find_div_xianshi" >
	                                                        <span>这里是提示</span>
	                                                    </div>
	                                                </div>
	                                        </div>
	                                        <div class="clearfix"></div>
	                                    </div>
	                                </div>
	                            	</div>
	                            	<div>
								<div class="adding" id="adding">+ &nbsp;继续添加</div>
							</div>
					       	<form action="#" method="get" class="yangyi_img">
					       		<div class="pull-left marginBottom" style="border: none; padding: 0; font-size: 14px;">已上传了${sampleStoreList?size}款样衣</div>
					       		<table class="table table-bordered">
					       			<tr class="left-text add_tr">
					       				<th style="border: 0; width: 20%;">样衣图</th>
					       				<th style="border: 0; width: 10%;">季节款式</th>
					       				<th style="border: 0; width: 10%;">款式性别</th>
					       				<th style="border: 0; width: 10%;">样衣分类</th>
					       				<th style="border: 0; width: 20%;">来源</th>
					       				<th style="border: 0; width: 10%;">风格</th>
					       				<th style="border: 0; width: 10%;">操作</th>
					       			</tr>
					       			<#if sampleStoreList?size!=0>
					       			<#list sampleStoreList as sample>
					       			<tr  style="border-top: 1px solid #ccc;">
					       				<td style="border: 0;">
					       					<img src="${Application.accessFileUrl!}${sample.mainImage!}"/>
					       				</td>
					       				<td style="border: 0;">${sample.season!}</td>
					       				<td style="border: 0;">${sample.sex!}</td>
					       				<td style="border: 0;">${sample.category!}</td>
					       				<td style="border: 0;">${sample.source!}</td>
					       				<td style="border: 0;">
					       					<#list sample.style as style>
					       					<span class="tag">${style!}</span>
					       					</#list>
					       				</td>
					       				<td style="border: 0;">
					       					<span hidden>${sample.id!}</span>
					       					<a href="javascript:;" name="edit">编辑</a>
					       				</td>
					       			</tr>
					       			</#list>
					       			</#if>
					       		</table>
                                <div class="clearfix">
                                    <a href="javascript:;" id="create_order"><div class="btn btn-primary ">确定创建</div></a>
                                    <a href="javascript:;" id="give_up"><div class="btn btn-default ">取消</div></a>
                                </div>
                           </form>
                            	</div>
                            	
                                     
				               	
							
							
							
                                </div>
                            </div>
                            </div><!-- /.box -->
                        </div><!-- /.col-->
                    </div><!-- ./row -->
                </section><!-- /.content -->
            </aside><!-- /.right-side -->
        </div><!-- ./wrapper -->
        
        <style type="text/css">
        	.clear{
	            clear: both;
	            width: 100%;
	            height: 1px;
	
	        }
	        .photo{
	            height: 430px;
	            max-height: 430px;
	            border:1px solid #ccc;
	            margin-top: 20px;
	            margin-bottom: 20px;
	            padding: 0;
	        }
	       
	        .shangchuan{
	            margin-top: 100px;
	            position: relative;
	            cursor: pointer;
	            background: #fafafa;
	            border: 1px solid #ddd;
	            border-radius: 4px;
	            overflow: hidden;
	            display: inline-block;
	            *display: inline;
	            *zoom: 1;
	        }
	        .shangchuan  input {
	            position: absolute;
	            font-size: 100px;
	            right: 0;
	            top: 0;
	            opacity: 0;
	            filter: alpha(opacity=0);
	            cursor: pointer
	        }
	        
	        
	        
	        .zhanshi{
	            width: 100%;
	            height: 100%;
	            position: absolute;
	            top: 0;
	            display: none;
	            background-color: #fff;
	
	        }
	        .zhanshi_find1{
	            widows: 96%;
	            height: 96%;
	            margin: 1% 2%;
	        }
	        .zhanshi_find1>.col-md-8{
	            height: 100%;
	            padding: 0;
	        }
	        .zhanshi img{
	            width: 100%;
	            height: 100%;
	            border-width: 0;
	        }
	        #zhanshi_photo{
	        	width: 720px;
	        	height: 405px;
	        	border: 1px solid #ccc;
	        }
	        .zhanshi_find1>.col-md-4{padding: 0;}
	        .zhanshi_find1>.col-md-4>span{
	            width: 20%;
	            height: 60px;
	            display: inline-block;
	            float: left;
	            border:1px solid #ccc;
	            cursor: pointer;
	            margin:0 0 10px  10px;
	            position: relative;
	        }
	        .span_active{
	            border:2px solid #3882FF !important;
	            box-shadow: 0 0 3px #3882ff;
	        }
	        .zhanshi_find1>.col-md-4>span>p{
	            position: absolute;
	            width: 100%;
	            text-align: center;
	            height: 20px;
	            line-height: 20px;
	            bottom: -10px;
	            font-size: 10px;
	            background-color: #4f8aee;
	            color: #fff;
	            display: none;
	        }
	        .zhanshi_find1>.col-md-4>span>i{
	           position: absolute;
	           top: -3px;
	           right: -7px;
	           z-index: 9;
	        }
	        .tianjia{
	            display: inline-block;
	            width: 20%;
	            height: 60px;
	            display: inline-block;
	            float: left;
	            border:1px solid #ccc;
	            cursor: pointer;
	            margin:0 0 10px  10px;
	            position: relative;
	        }
	        .tianjia  input {
	            position: absolute;
	            font-size: 100px;
	            right: 0;
	            top: 0;
	            opacity: 0;
	            filter: alpha(opacity=0);
	            cursor: pointer;
	            width:100%;
	            height: 100%;
	        }
	        
	        
	        
	        .custorm-view{
                border: none;
            }
            .beizhu{
	            width: 91%;
	            padding-left: 10px;
	            line-height: 40px;
	            margin-top: 20px;
	            margin-left: 5%;
	        }
	        .find_sp{
	            margin-bottom: 10px;
	            padding: 0 10px;
	            display: inline-block;
	            font-weight: bold;
	            float: left;
	            padding-right: 5px;
	            line-height: 30px;
	        }
	        .find_div{
	            width: 90%;
	            height:90px;
	            border:1px solid #ccc;
	            float: left;
	        }
	        .six-font{
	            font-size: 14px;
	        }
	        .six-font>span{
	            font-size: 16px;
	        }
	     	.shejixinxi{
	            border:1px solid #ccc;
	        }
	        .bootstrap-tagsinput input {
		    	padding:0;
			    width: 100%;
			}
	       	.bootstrap-tagsinput{
	        	border:none;
	       	}
	       
	       	.bootstrap-tagsinput .tag {
			    margin-right: 2px;
			    color: #3882ff;
			    border: 1px solid;
			    border-radius: 0;
			    margin-bottom: 5px;
			    display: inline-block;
			}
	       	.label-info{
	        	background-color: #fff;
	       	}
	       	.find_div2{
		        width: 40%;
		        height: 32px;
		        overflow: hidden;
		        float: left;
		        line-height: 26px;
	       	}
	        
	        .yangyi_img img{
	        	border: 1px solid #ccc;
	        	width: 100px;
	        	height: 100px;
	        }
	        .find_div_xianshi{
		        height: 30px;
		        line-height: 30px;
		        width: 100%;
		        position: absolute;
		        bottom: -30px;
		        z-index: 9;
		        border:1px solid #ccc;
		        background-color: #fff;
		        display: none;
	       	}
	       .find_div_xianshi>span{
		        padding: 0 10px;
		    }
			.find_div{
	            position: relative;
	        }
        </style>
        
        
        <!-- jQuery 2.0.2 -->
        <script src="../js/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="../js/bootstrap.min.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="../js/AdminLTE/app.js" type="text/javascript"></script>
        <!-- AdminLTE for demo purposes -->      
        <script src="../js/bootstrap-tagsinput.js"></script>
        <script src="../js/order/proofing_customer.js" type="text/javascript"></script>
        <script type="text/javascript">
         
         	$("#file_upload").click(function () {
            	$('#file_upload2').click();
            });

            $('#file_upload2').change(selectImage);
           
            function selectImage(){
            	$('.zhanshi').show();
            	
                var $file = $(this);
                var fileObj = $file[0];
                var windowURL = window.URL || window.webkitURL;
                var dataURL;
                var $img = $("#zhanshi_photo");

                if (fileObj && fileObj.files && fileObj.files[0]) {
                    dataURL = windowURL.createObjectURL(fileObj.files[0]);
                    if($(':file').length==1)
                    	$img.attr('src', dataURL);
                } else {
                    dataURL = $file.val();
                    var imgObj = document.getElementById("zhanshi_photo");
                    // 两个坑:
                    // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
                    // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
                    imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    if($(':file').length==1)
                    	imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

                }
                var a=$('<span >'+'<i class="fa fa-fw fa-times"></i> <img src="'+dataURL+'">'+'  <p >主图</p>'+' </span> ');
                // '+dataURL+'
                a.children('i').click(removeImage);
                 
				a.find('p').click(selectMainImage);
				
				a.hover(function () {
		                     $(this).find('p').show();
				},function(){
					if($(this).find('p').html()!='主图')
		                   		$(this).find('p').hide();
				});
                  
                $('.tianjia').before(a);
                 
                if($(':file').length>1){
                 	a.find('p').html('设为主图');
                }
                
                if($(':file').length==1)
                    $('.tianjia').siblings().children('p').eq(0).css('display','block');
                
                $('.zhanshi_find1 .col-md-4 span').click(selectImg)
	
                var input=$('<input type="file" accept="image/*" id="file_upload2"/>')
                $(this).removeAttr('id').hide().after(input);
                input.change(selectImage);
				if($(':file').length==6){
					$(this).parent().hide();
				}
	
            }
            
             $('.zhanshi_find1 .col-md-4 span').click(function(){
                    $(this).addClass('span_active');
                    $(this).siblings('span').removeClass('span_active');
                    var src=$(this).find('img').attr('src');
                    $("#zhanshi_photo").attr("src",src);

                });
             
             function selectImg(){
                 $(this).addClass('span_active');
                 $(this).siblings('span').removeClass('span_active');
                 var src=$(this).find('img').attr('src');
                 $("#zhanshi_photo").attr("src",src);
             }
            
            function removeImage(){
				$('.tianjia').show();
				var index=$('.zhanshi_find1 .col-md-4 span').index($(this).parent());
				$(this).parent().remove();
				$(':file').eq(index).remove();
                if($(this).next().next().css('display')=='block'){
                    $("#zhanshi_photo").attr('src',null);
                }
                return false;
            }
            $(function(){
            	model.ids='${ids!}';
            	model.url='${Application.accessFileUrl!}';
            })
            
            function selectMainImage(){
				$(this).parent().siblings('span').find('p').html('设为主图').hide();
				$(this).html('主图');
				return false;
			}
       		
            $(function(){
            	$('.bootstrap-tagsinput').children('input').attr('placeholder','输入内容后，敲回车键生成标签');
            })
        </script>

    </body>
</html>


